<template>
	<view class="item" @click="onEvent">
		<view class="item_left">
			<image class="item_left_head" :src="options.avatar"></image>
		</view>
		<view class="item_right">
			<view class="item_right_top">
				<view class="item_right_top_name">{{options.realname}}</view>
				<view class="item_right_top_tag">
					<view class="item_right_top_tag_btn1">详情</view>
					<view class="item_right_top_tag_btn2">入职</view>
				</view>
			</view>
			<view class="item_right_info">
				<view class="item_right_info_item">
					<view class="item_right_info_item_label">年龄：</view>
					<view class="item_right_info_item_value">{{options.age}}</view>
				</view>
				<view class="item_right_info_item">
					<view class="item_right_info_item_label">身份类别：</view>
					<view class="item_right_info_item_value">{{options.identityCategory_dictText}}</view>
				</view>
				<view class="item_right_info_item">
					<view class="item_right_info_item_label">公司：</view>
					<view class="item_right_info_item_value">{{options.company_dictText}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			options: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		methods: {
			onEvent() {
				this.$Router.push({name: "crm_employment_pending_edit",params: this.options})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		&_left {
			&_head {
				width: 120rpx;
				height: 120rpx;
				background-color: #f5f5f5;
				border-radius: 50%;
			}
		}
		&_right {
			flex: 1;
			padding-left: 20rpx;
			box-sizing: border-box;
			&_top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				&_name {
					font-size: 32rpx;
					color: #000000;
					font-weight: 700;
					line-height: 64rpx;
				}
				&_tag {
					display: flex;
					align-items: center;
					&_btn1 {
						color: #4BCA97;
						background-color: #C7FDE0;
						border-radius: 8rpx;
						padding: 4rpx 15rpx;
						box-sizing: border-box;
						margin-right: 20rpx;
						font-size: 24rpx;
					}
					&_btn2 {
						color: #5686E8;
						background-color: #C7D6FF;
						border-radius: 8rpx;
						padding: 4rpx 15rpx;
						box-sizing: border-box;
						font-size: 24rpx;
					}
				}
			}
			&_info {
				&_item {
					display: flex;
					align-items: center;
					line-height: 46rpx;
					&_label {
						font-size: 28rpx;
						color: #000000;
					}
					&_value {
						font-size: 28rpx;
						color: #000000;
					}
				}
			}
			
		}
	}
</style>